<!--
 * @Author: ShentuKeqin
 * @Date: 2021-08-22 17:16:37
 * @LastEditTime: 2021-08-22 18:22:41
-->
<template>
  <div class="container">
    <header class="header">
      <top-bar
        v-model="area"
        :routes="[{path: '/',breadcrumbName: '人群出行热力图'}]"
      />
    </header>
    <section class="main">
      <heat-map :area="area" />
    </section>
    <aside class="aside">
      <outting-tips :crowd="crowd"/>
      <outting-sider width="auto" :options="outtingDatas[area]"/>
      <disease-sider />
    </aside>
  </div>
</template>

<script>
import HeatMap from "../components/heatMap/heatMap.vue";
import TopBar from "../components/topBar/polyfill.vue";
import DiseaseSider from "../components/diseaseSider/polyfill.vue";
import OuttingSider from "../components/outtingSider/Echarts.vue";
import OuttingTips from "../components/outtingSider/outtingTips.vue"
import OuttingDatas from "../components/outtingSider/options.js";

import vhCheck from "vh-check";

vhCheck();

export default {
  components: {
    HeatMap,
    TopBar,
    DiseaseSider,
    OuttingSider,
    OuttingTips,
  },
  data() {
    return {
      area: "",
      outtingDatas: OuttingDatas,
      crowd: -1000,
    };
  },
  watch: {
    area(v) {
      //this.$message.info(v);
      if(v=="天安门广场"){
        this.crowd = 5000;
      }
      else if(v=="八达岭长城"){
        this.crowd = 11000;
      }
      else{
        this.crowd = -100;
      }
    },
  },
};

</script>

<style>
.container {
  display: grid;
  grid-template-columns: auto 32rem;
  grid-template-rows: 4rem auto;
  grid-template-areas:
    "header header"
    "main aside";
  width: 100%;
  height: 100vh;
  height: calc(100vh - var(--vh-offset, 0px));
}

.header {
  grid-area: header-start/ header-start/ header-end/ header-end;
  z-index: 2;
  height: 4rem;
  width: 100%;
  background-color: white;
}

.main {
  margin-top: -4rem;
  grid-area: main-start/ main-start/ main-end/ main-end;
  z-index: 0;
}

.aside {
  grid-area: aside-start/ aside-start / aside-end/ aside-end;
  overflow-x: hidden;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding-top: 3rem;
}

@media (max-width: 80rem) {
  .container {
    grid-template-columns: auto;
    grid-template-rows: 4rem auto auto;
    grid-template-areas:
      "header"
      "main"
      "aside";
    height: auto;
  }

  .header {
    position: fixed;
    top: 0;
  }

  .main {
    position: sticky;
    top: 0;
    height: calc(100vh);
    height: calc(100vh - var(--vh-offset, 0px));
  }

  .aside {
    border-radius: 8px 8px 0 0;
    box-shadow: 0 5px 10px 0;
    padding-top: 0;
    margin-top: -4rem;
    backdrop-filter: blur(50px);
  }

  .aside::before {
    height: 0.5rem;
    width: 8rem;
    content: "";
    display: block;
    margin: 0.75rem auto;
    border-radius: 8px;
    text-decoration: gray underline;
    background-color: gray;
  }
}
</style>
